<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="500"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Parameters ---
    const cx = 250;
    const cy = 240; // Adjusted for better vertical centering
    const R = 160;
    const lineWidth = 2;
    const dotRadius = 3;
    const font = 'italic 20px Times New Roman';
    const labelFont = '20px Times New Roman';

    // --- Helper function for arrows ---
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const angle = Math.atan2(toy - fromy, tox - fromx);
        // Draw the line part
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
        
        // Draw the arrowhead
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing Logic ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = lineWidth;
    
    // 1. Outer circle
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Center point
    ctx.beginPath();
    ctx.arc(cx, cy, dotRadius, 0, 2 * Math.PI);
    ctx.fill();

    // 3. Sources and radii 'a'
    const angle1_deg = 90;
    const angle2_deg = 210;
    const angle3_deg = 330;

    const angle1_rad = angle1_deg * Math.PI / 180;
    const angle2_rad = angle2_deg * Math.PI / 180;
    const angle3_rad = angle3_deg * Math.PI / 180;

    const s1 = { x: cx + R * Math.cos(angle1_rad), y: cy + R * Math.sin(angle1_rad) };
    const s2 = { x: cx + R * Math.cos(angle2_rad), y: cy + R * Math.sin(angle2_rad) };
    const s3 = { x: cx + R * Math.cos(angle3_rad), y: cy + R * Math.sin(angle3_rad) };
    const sources = [s1, s2, s3];

    // Set font for labels
    ctx.font = font;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Draw lines and labels for sources
    // Source 1 (bottom)
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(s1.x, s1.y);
    ctx.stroke();
    ctx.fillText('a', cx - 15, cy + R / 2);

    // Source 2 (left)
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(s2.x, s2.y);
    ctx.stroke();
    ctx.fillText('a', cx + (s2.x - cx) / 2 + 15, cy + (s2.y - cy) / 2 + 5);

    // Source 3 (right)
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(s3.x, s3.y);
    ctx.stroke();
    ctx.fillText('a', cx + (s3.x - cx) / 2 - 15, cy + (s3.y - cy) / 2 + 10);

    // Draw dots for sources
    sources.forEach(s => {
        ctx.beginPath();
        ctx.arc(s.x, s.y, dotRadius, 0, 2 * Math.PI);
        ctx.fill();
    });

    // 4. Mass 'm' and vector 'r'
    const r_len = 90;
    const r_angle_deg = -50;
    const r_angle_rad = r_angle_deg * Math.PI / 180;
    const m_pos = { x: cx + r_len * Math.cos(r_angle_rad), y: cy + r_len * Math.sin(r_angle_rad) };

    // Dot for m
    ctx.beginPath();
    ctx.arc(m_pos.x, m_pos.y, dotRadius, 0, 2 * Math.PI);
    ctx.fill();

    // Line for r
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(m_pos.x, m_pos.y);
    ctx.stroke();

    // Label 'm'
    ctx.fillText('m', m_pos.x - 18, m_pos.y - 12);

    // Label 'r'
    ctx.fillText('r', cx + (m_pos.x - cx) * 0.5 - 5, cy + (m_pos.y - cy) * 0.5 + 10);

    // 5. Line from source 3 to mass m
    ctx.beginPath();
    ctx.moveTo(s3.x, s3.y);
    ctx.lineTo(m_pos.x, m_pos.y);
    ctx.stroke();
    
    // 6. Velocity vector 'v'
    const v_len = 100;
    const v_angle_deg = -15;
    const v_angle_rad = v_angle_deg * Math.PI / 180;
    const v_end = { 
        x: m_pos.x + v_len * Math.cos(v_angle_rad), 
        y: m_pos.y + v_len * Math.sin(v_angle_rad) 
    };

    drawArrow(ctx, m_pos.x, m_pos.y, v_end.x, v_end.y);
    ctx.fillText('v', v_end.x - 5, v_end.y - 20);

    // 7. Caption
    ctx.font = labelFont;
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 1.21.', cx, cy + R + 60);

</script>

</body>
</html>